/**
 * 重构后的Home页面 - 使用组件化架构
 * 这是完整的示例文件，展示如何使用所有拆分后的组件
 */

import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
    AreaChart,
    Area,
    BarChart,
    Bar,
    RadarChart,
    Radar,
    PieChart,
    Pie,
    XAxis,
    YAxis,
    CartesianGrid,
    PolarGrid,
    PolarAngleAxis,
    PolarRadiusAxis,
    Tooltip,
    Legend,
    ResponsiveContainer,
    Cell,
} from "recharts";

// 导入所有已创建的组件
import {
    HeroSection,
    PainPointsSection,
    SourcesSection,
    ProductSection,
    ArchitectureSection,
    InnovationSection,
    PerformanceSection,
    BusinessSection,
    ImplementationSection,
    TeamSection,
    SystemDesignSection,
    ProductArchitectureSection,
    FutureSection,
    Header,
    Footer
} from "../components/home";

// 导入数据常量
import { sections } from "../data/homeData";

export default function HomeRefactored() {
    const [activeSection, setActiveSection] = useState("hero");
    const sectionRefs = useRef<Record<string, HTMLElement | null>>({});

    // 滚动监听逻辑
    useEffect(() => {
        const handleScroll = () => {
            const scrollPosition = window.scrollY + 100;

            for (const section of sections) {
                const element = sectionRefs.current[section.id];
                if (element) {
                    const offsetTop = element.offsetTop;
                    const offsetBottom = offsetTop + element.offsetHeight;

                    if (scrollPosition >= offsetTop && scrollPosition < offsetBottom) {
                        setActiveSection(section.id);
                        break;
                    }
                }
            }
        };

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    // 滚动到指定章节
    const scrollToSection = (sectionId: string) => {
        const element = sectionRefs.current[sectionId];
        if (element) {
            window.scrollTo({
                top: element.offsetTop - 80,
                behavior: "smooth"
                });
        }
    };

    return (
        <div className="min-h-screen bg-gray-50 font-['Inter'] text-gray-800 overflow-x-hidden">
            {/* 头部组件 */}
            <Header
                activeSection={activeSection}
                onScrollToSection={scrollToSection}
            />

            <main>
                {/* 英雄区域组件 */}
                <HeroSection
                    onScrollToSection={scrollToSection}
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.hero = el}
                />

                {/* 市场痛点与机会组件 */}
                <PainPointsSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current["pain-points"] = el}
                />

                {/* 资料来源与数据引用组件 */}
                <SourcesSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.sources = el}
                />

                {/* 产品概述组件 */}
                <ProductSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.product = el}
                />

                {/* 技术架构组件 */}
                <ArchitectureSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.architecture = el}
                />

                {/* 技术创新点组件 */}
                <InnovationSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.innovation = el}
                />

                {/* 性能对比组件 */}
                <PerformanceSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.performance = el}
                />

                {/* 商业价值与盈利模式组件 */}
                <BusinessSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.business = el}
                />

                {/* 实施路径组件 */}
                <ImplementationSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.implementation = el}
                />

                {/* 精英团队构成组件 */}
                <TeamSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.team = el}
                />

                {/* 系统设计与功能模块组件 */}
                <SystemDesignSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current["system-design"] = el}
                />

                {/* 产品架构与创新点组件 */}
                <ProductArchitectureSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current["product-architecture"] = el}
                />

                {/* 未来发展与创新方向组件 */}
                <FutureSection
                    sectionRef={(el: HTMLElement | null) => sectionRefs.current.future = el}
                />
            </main>

            {/* 底部组件 */}
            <Footer onScrollToSection={scrollToSection} />
        </div>
    );
}